<template>
  <div>
    <Scrollbar ref="scrollbar"/>
    <div class="header">
      <PlayerHeader/>
    </div>
    <div class="main-login">
      <Login/>
    </div>
    <div class="main"
         ref="mainParent"
         :style="{overflow:'auto'}"
         @scroll="handleScroll">
      <!-- 缓存发现页面-->
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <div>
      <TranslatePanel :is-show="isShowPlayList">
        <template slot="showContent">
          <CurrentPlayingListPage/>
        </template>
      </TranslatePanel>
    </div>
    <transition name="music-play-bar">
      <div class="footer" v-if="isShowBottom">
        <MusicPlay/>
      </div>
    </transition>
  </div>
</template>

<script>
import PlayerHeader from "@/components/PlayerHeader.vue";
import Login from "@/components/Login.vue";
import mainPage from "@/pages/mainPage.vue";
import MusicPlay from "@/components/MusicPlay.vue";
import {ACTIONS_GETEXPLOREPAGECATLIST, ACTIONS_GETLOGINCOUNTRYLIST, SHOWCURPLAYING} from "@/http/constant";
import TranslatePanel from "@/components/TranslatePanel.vue";
import Scrollbar from "@/components/Scrollbar.vue";
import {mapState} from "vuex";
import CurrentPlayingListPage from "@/pages/CurrentPlayingListPage.vue";

export default {
  name: 'App',
  data() {
    return {
      isShowPlayList: false
    }
  },
  components: {
    CurrentPlayingListPage,
    Scrollbar,
    TranslatePanel,
    PlayerHeader,
    Login,
    mainPage,
    MusicPlay
  },
  methods: {
    handleScroll() {
      const {scrollbar} = this.$refs
      scrollbar.handleScroll()
    }
  },
  computed: {
    ...mapState(['isShowBottom'])
  },
  created() {
    // 请求发现页的标签分类
    this.$store.dispatch(ACTIONS_GETEXPLOREPAGECATLIST)
    // 获取国家区号
    this.$store.dispatch(ACTIONS_GETLOGINCOUNTRYLIST)
  },
  mounted() {
    this.$bus.$on(SHOWCURPLAYING, d => {
      const {isUseFlag, flag} = d
      if (isUseFlag) {
        this.isShowPlayList = flag
      } else {
        this.isShowPlayList = !this.isShowPlayList
      }
    })
  }
}
</script>

<style lang="less">
@import "./assets/less/common";

.music-play-bar-enter, .music-play-bar-leave-to {
  transform: translateY(100%);
}

.music-play-bar-enter-active, .music-play-bar-leave-active {
  transition: .3s linear;
}

.music-play-bar-enter-to, .music-play-bar-leave {
  transform: translateY(0);
}

.main {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: auto;
  padding: 84px @containerPadding 96px @containerPadding;
  box-sizing: border-box;
  scrollbar-width: none;

  //隐藏掉原生的滚动条
  &::-webkit-scrollbar {
    width: 0;
  }
}

.header {
  position: fixed;
  width: 100vw;
  top: 0;
  right: 0;
  z-index: 100;
}

.footer {
  position: fixed;
  width: 100vw;
  bottom: 0;
  right: 0;
  z-index: 100;
}

.my-dialog {
  border-radius: 20px;
}

.mouse-cursor-default {
  cursor: default;
}

.mouse-cursor-finger {
  cursor: pointer;
}
</style>
